<template>
	<view class="rows top " v-if="pageData">
		<status-bar ref='statusbar' title='开始答题' back='1'></status-bar>
		<view class="viewbox auto d-flex f-column a-center p-top100">
			<text class="color_33 size42 bold500">{{pageData.wx_title}}</text>
			<text class="color_E6 size30 m-top20" v-if="pageData.answer_type == 1">请在每日24时前完成答题</text>
			<text class="color_E6 size30 m-top20" v-if="pageData.answer_type == 2">请在{{pageData.end_time}}前完成答题</text>
			<text class="color_E6 size30 m-top20" v-if="pageData.answer_type == 3">共{{pageData.people_count}}人答题</text>
			
			<block v-if="pageData.state != 0">
			<view class="d-flex f-column a-center m-top20">
				<text class="color_33 size32 bold500">已完成{{pageData.do_num}}题</text>
				<view class="prose m-top10">
					<view class="proli" :style="{width:'10%'}"></view>
				</view>
			</view>
			
			<view class="d-flex f-column a-center m-top40">
				 <text class="color_99 size28 bold500">预计得分</text>
				 <text class="mark">{{pageData.prediction_score}}</text>
			</view>
			<view class="Status d-flex j-sb a-center color_66 h6 m-top20">
				<text>正确{{pageData.correct_num}}题</text>
				<text>错误{{pageData.wrong_num}}题</text>
			</view>
			
			<view class="lookerrors m-top30 flexac" @click="toUrl(`errors?act_id=${act_id}`)">查看错题</view>
			</block>	
			
			<image :src="$online('t1.png')" class="t1Img m-top20"></image>
			<text class="color_29 size30 m-top10">共{{pageData.total_count}}题，每日{{pageData.day_count}}题</text>
			<text class="color_29 size30 m-top10">共{{pageData.people_count}}人答题</text>
			<view class="rows   size26 m-top30">
				<u-parse :content="pageData.act_rule" :domain="imgUrl"></u-parse>
			</view>
		</view>
		<view class="answerBtn white size32 flexac"  @click="anlist">{{botTxt}}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				imgUrl:this.imgUrl,
				act_id:'',
				gid:'',
				pageData:'',
			}
		},
		onLoad(opt) {
			if(opt.act_id) this.act_id = opt.act_id;
			if(opt.gid) this.gid = opt.gid;
		},
		onShow() {
			this.Index();
		},
		methods: {
			Index(){
				this.$showLoading('');
				this.$http.post({
					url:'/SRA_Standup2021/index',
					data:{
						act_id:this.act_id,
						gid:this.gid,
						token: this.bid
					}
				}).then(res=>{
					this.$hideLoading();
					if(!res.success) return this.$Toast(res.data,2);
					this.pageData = res.data;
				})
			},
			anlist(){
				if(this.pageData.state == 2) return;
				this.toUrl(`list?act_id=${this.act_id}&gid=${this.gid}`)
			}
		},
		computed: {
			...mapState(['bid']),
			botTxt(){
				if(!this.pageData) return;
				if(this.pageData.state == 0) return '开始答题';
				if(this.pageData.state == 1) return '继续答题';
				if(this.pageData.state == 2) return '已完成';
			}
		},
	}
</script>

<style lang="scss" scoped>
	.t1Img{
		width:398rpx;
		height: 398rpx;
	}
	.color_29{
		color:#296DD3;
	}
	.answerBtn{
		width: 340rpx;
		height: 66rpx;
		background: #F34343;
		border-radius: 33rpx;
		margin:100rpx auto;
	}
	.prose{
		width: 132rpx;
		height: 10rpx;
		background: #DEDEDE;
		border-radius: 5rpx;
		overflow: hidden;
		position: relative;
	}
	.proli{
		height: 100%;
		position: absolute;
		left:0;
		top:0;
		z-index:10;
		background-color: #FF4459;
	}
	.mark{
		color:#FF4459;
		font-size:84rpx;
		font-weight: bold;
	}
	.Status{
		width:400rpx;
	}
	.lookerrors{
		width: 126rpx;
		height: 42rpx;
		font-size: 22rpx;
		color: #C71B1B;
		background: #FFE6E6;
		border-radius: 21rpx;
	}
</style>
